<template>
  <div>
    <a-form
      :model="formState"
      name="horizontal_login"
      layout="inline"
      autocomplete="off"
      @finish="onFinish"
    >
      <a-form-item>
        <a-input
          v-model:value="formState.username"
          placeholder="公司名称"
          style="width: 220px"
        >
        </a-input>
      </a-form-item>

      <a-form-item>
        <a-input
          v-model:value="formState.username"
          placeholder="公司法人"
          style="width: 220px"
        >
        </a-input>
      </a-form-item>

   
      <a-form-item>
        <a-range-picker v-model:value="value1"  :placeholder='["收藏开始日期", "收藏结束日期"]'/>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" :icon="h(SearchOutlined)">查询</a-button>
      </a-form-item>
    </a-form>
    <a-table
      class="ant-table-striped mt-[20px]"
      size="middle"
      :columns="columns"
      :data-source="dataSource"
      :pagination="false"
      :row-class-name="
        (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
      "
    />
    <a-pagination
      class="mt-[20px]"
      v-model:current="page.current"
      show-quick-jumper
      :total="page.total"
      @change="onChange"
      :show-total="(total) => `共 ${page.total} 条`"
    />
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { h } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue';
import { message } from "ant-design-vue";
import { collectlist, collectcancel } from "../../../../Api/work";
import dayjs from "dayjs";
const page = reactive({
  current: 1,
  total: 0,
  size: 10,
});

const formState = ref({
  username: "",
  password: "",
});
const onFinish = (values: any) => {
  console.log("Success:", values);
};

const columns = [
  { title: "企业公司", dataIndex: "name" },
  { title: "经营范围", dataIndex: "age" },
  { title: "公司法人", dataIndex: "address" },
  { title: "收藏日期", dataIndex: "name" },
  { title: "操作", dataIndex: "option" },
];


const dataSource = ref([]);
const getData = async () => {
  const params = {
    ...formState.value,
    page: page.current,
    limit: page.size,
  };

  if (params.time?.[0]) {
    params.start_time = dayjs(params.time?.[0].format('YYYY-MM-DD 00:00:00')).unix();
    params.end_time = dayjs(params.time?.[1].format('YYYY-MM-DD 23:59:59')).unix();
    delete params.time
  }

  const res = await collectlist(params);
  dataSource.value = res.data?.data?.list;

  page.total = res.data?.data?.count;
};

getData();

const cancel = async (nid) => {
  const res = await collectcancel({ nid });

  if (res?.data?.code == 1) {
    message.success("操作成功");

    getData();
  } else {
    message.error(res?.data?.msg);
  }
};

const onChange = (p) => {
  page.current = p;
  getData();
};
</script>

<style lang="scss" scoped>
.ant-table-striped :deep(.table-striped) td {
  background-color: #edf0f6;
}

:deep(
    :where(.css-dev-only-do-not-override-omspr6).ant-table-wrapper
      .ant-table-thead
      > tr
      > th
  ) {
  background: #ecf4ff !important;
}
</style>
